<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>hh-ui</title>
    <style>
        hh-button,
        hh-checkbox,
        hh-radio,
        hh-input,
        hh-textarea {
            margin: 0 10px 15px 0;
            vertical-align: middle;
        }

        hh-input:not([block]),
        hh-textarea:not([block]) {
            width: 300px;
        }

        p {
            padding: 5px 10px;
            border-left: 4px solid olive;
            color: #666
        }

        .layout {
            height: 300px;
        }

        .side {
            width: 200px;
        }

        .main {
            margin: 0 10px;
        }

        .box {
            width: 100px;
            height: 100px;
            color: #fff;
        }

        .header,
        .footer {
            padding: 5px 10px;
            color: #fff;
        }

        hh-layout {
            background: #2196f380;
        }

        hh-img {
            width: 200px;
            height: 150px;
        }

        hh-col {
            background: #2196f380;
            color: #fff;
        }

        :not(:defined) {
            opacity: 0;
        }

        :root {
            /*--themeBackground:linear-gradient(to bottom, #42b983 0%,#06b2a1 100%)*/
        }

        .parent[coord] {
            display: flex;
            width: 500px;
            height: 500px;
            background: #fff;
            color: #fff;
            border: 10px solid #f1f1f1;
            position: relative;
        }

        .child {
            width: 50px;
            height: 50px;
            background: #42b983;
            transition: 0.1s;
            transform: translate(100px, 100px);
        }

        .ball {
            position: absolute;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #42b983;
        }

        .parent[coord]:hover .ball {
            transform: translate(calc(var(--x) * 1px - 10px - 25px), calc(var(--y) * 1px - 10px - 25px)) !important;
        }

        .child:active {
            background: #2c9666;
            pointer-events: none;
            transition: transform 0s;
            transform-origin: 0 0;
            transform: translate(calc(var(--x) * 1px - var(--_x) * 1px - 10px), calc(var(--y) * 1px - var(--_y) * 1px - 10px)) !important;
        }

        .dropbox {
            width: 200px;
            height: 200px;
            background: #fff;
            color: #fff;
            border: 10px solid #f1f1f1;
        }

        .dropbox-parent {
            width: 500px;
            height: 500px;
        }

        .dropbox[over],
        .dropbox:focus {
            border-color: #2c9666;
        }
    </style>

    <!-- <script type="module" src="./dist/index.js"></script> -->
    <script type="module" src="./index.js"></script>

</head>

<body>
    <h2>theme</h2>
    <hh-button type="primary" class="theme-button" style="--themeColor:#42b983">#42b983</hh-button>
    <hh-button type="primary" class="theme-button" style="--themeColor:#ff4d4f">#ff4d4f</hh-button>
    <hh-button type="primary" class="theme-button" style="--themeColor:#ff7a45">#ff7a45</hh-button>
    <hh-button type="primary" class="theme-button" style="--themeColor:#ffa940">#ffa940</hh-button>
    <hh-button type="primary" class="theme-button" style="--themeColor:#faad14">#faad14</hh-button>
    <hh-button type="primary" class="theme-button" style="--themeColor:#a0d911">#a0d911</hh-button>
    <hh-button type="primary" class="theme-button" style="--themeColor:#52c41a">#52c41a</hh-button>
    <hh-button type="primary" class="theme-button" style="--themeColor:#13c2c2">#13c2c2</hh-button>
    <hh-button type="primary" class="theme-button" style="--themeColor:#2f54eb">#2f54eb</hh-button>
    <hh-button type="primary" class="theme-button" style="--themeColor:#722ed1">#722ed1</hh-button>
    <h2>button</h2>
    <p>normal</p>
    <hh-button type="primary" href="https://www.baidu.com/" id="btn">link</hh-button>
    <hh-button type="primary" id="btn">primary</hh-button>
    <hh-button type="dashed">dashed</hh-button>
    <hh-button type="flat">flat</hh-button>
    <hh-button>default</hh-button>
    <hh-button type="primary" loading>loading</hh-button>
    <p>block</p>
    <hh-button type="primary" block><a>primary</a></hh-button>
    <hh-button type="dashed" block>dashed</hh-button>
    <hh-button type="flat" block>flat</hh-button>
    <hh-button block>default</hh-button>
    <p>disabled</p>
    <hh-button disabled type="primary" onclick="console.log(11111)"><a>primary</a></hh-button>
    <hh-button disabled type="dashed">dashed</hh-button>
    <hh-button disabled type="flat">flat</hh-button>
    <hh-button disabled>default</hh-button>
    <h2>loading</h2>
    <hh-loading></hh-loading>
    <hh-loading size="40" color="green"></hh-loading>
    <hh-loading size="60" color="olivedrab"></hh-loading>
    <hh-loading size="80" color="orange"></hh-loading>
    <h2>layout</h2>
    <hh-layout class="layout">
        <hh-layout class="header">HEADER</hh-layout>
        <hh-layout row expand>
            <hh-layout class="side"></hh-layout>
            <hh-layout expand center class="main">
                <hh-layout center class="box">hh-layout</hh-layout>
            </hh-layout>
            <hh-layout class="side"></hh-layout>
        </hh-layout>
        <hh-layout class="footer">FOOTER</hh-layout>
    </hh-layout>
    <h2>grid</h2>
    <hh-row gutter="10">
        <hh-col span="8">11</hh-col>
        <hh-col span="8">22</hh-col>
        <hh-col span="16">22</hh-col>
    </hh-row>
    <script>
        document.getElementById('btn').addEventListener('click', function (ev) {
            console.log(ev)
        })
        document.querySelectorAll('.theme-button').forEach((el) => {
            el.addEventListener('click', function () {
                const themeColor = window.getComputedStyle(el).getPropertyValue('--themeColor');
                document.body.style.setProperty('--themeColor', themeColor);
            })
        })
    </script>
</body>


</html>